import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  Image,
  TouchableOpacity,
  View,
  Platform,
} from 'react-native';

import Swiper from 'react-native-swiper';
import Login from '../../containers/LoginContainer';
import PxToDp from '../../utils/PxToDp';
import Base from '../../utils/Base';

const { width, height } = Base.window;

class SwiperPhoto extends Component {
  _goLogin = () => {
    const { navigator } = this.props;
    navigator.resetTo({
      component: Login,
      name: 'Login',
    });
  }
  render() {
    return (
      <Swiper
        style={style.wrapper}
        showsButtons={false}
        loop={false}
        dot={<View style={{ backgroundColor: '#ddd', width: PxToDp(9), height: PxToDp(9), borderRadius: PxToDp(5), marginLeft: PxToDp(4), marginRight: PxToDp(4) }} />}
        activeDot={<View style={{ backgroundColor: '#dc4437', width: PxToDp(14), height: PxToDp(9), borderRadius: PxToDp(7), marginLeft: PxToDp(4), marginRight: PxToDp(4) }} />}
        paginationStyle={{
          bottom: Platform.OS === 'ios' ? PxToDp(90) : PxToDp(110),
        }}
      >
        <View style={style.slide1}>
          <Image style={style.photo} source={require('../../img/1.png')} />
          <View style={style.start}>
            <TouchableOpacity style={[style.btn, style.border]} onPress={() => this._goLogin()}><Text style={{ color: '#DC4437', fontSize: 20 }}>立即体验</Text></TouchableOpacity>
          </View>
        </View>
        <View style={style.slide2}>
          <Image style={style.photo} source={require('../../img/2.png')} />
          <View style={style.start}>
            <TouchableOpacity style={[style.btn, style.border]} onPress={() => this._goLogin()}><Text style={{ color: '#DC4437', fontSize: 20 }}>立即体验</Text></TouchableOpacity>
          </View>
        </View>
        <View style={style.slide3}>
          <Image style={style.photo} source={require('../../img/3.png')} />
          <View style={style.start}>
            <TouchableOpacity onPress={() => this._goLogin()} style={[style.btn, style.btnbackground]}><Text style={{ color: '#fff', fontSize: 20 }}>立即体验</Text></TouchableOpacity>
          </View>
        </View>
      </Swiper>
    );
  }
}

const style = StyleSheet.create({
  slide1: {
    flex: 1,
  },
  slide2: {
    flex: 1,

  },
  slide3: {
    flex: 1,

  },
  photo: {
    flex: 1,
  },
  start: {
    height: PxToDp(44),
    width,
    position: 'absolute',
    top: Platform.OS === 'ios' ? height - 64 : height - 84,
    zIndex: 10,
    alignItems: 'center',
  },
  btn: {
    width: PxToDp(310),
    height: PxToDp(44),
    borderRadius: PxToDp(22),
    alignItems: 'center',
    justifyContent: 'center',

  },
  border: {
    borderWidth: Base.window.onePR,
    borderColor: '#DC4437',
  },
  btnbackground: {
    backgroundColor: '#DC4437',
  },
});

export default SwiperPhoto;
